<template>
  <div>
    <div class="cmt-wrapper" id="textarea">
      <h4>评论</h4>
      <div class="reply-tag" v-if="replyObj.name">
        回复: @{{replyObj.name}}
        <i class="el-icon-close" @click="replyObj = {}"></i>
      </div>
      <div class="textarea">
        <el-input type="textarea" placeholder="说点什么吧..." v-model="myComment"></el-input>
      </div>
      <el-row class="btn" type="flex" justify="space-between">
        <el-upload
          :action="$axios.defaults.baseURL + '/upload'"
          list-type="picture-card"
          name="files"
          :on-success="getPics"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <div class="btn-right" @click="reply">提交</div>
      </el-row>
    </div>
    <div class="comments">
      <div class="list" v-for="(item,index) in comments" :key="index">
        <el-row class="title" type="flex" justify="space-between">
          <div class="left">
            <img :src="item.account.defaultAvatar" class="userImg" />
            <span class="userName">{{item.account.nickname}}</span>
            <span class="time">{{item.updated_at | formatTime}}</span>
          </div>
          <div class="right">{{item.level}}</div>
        </el-row>
        <div class="content">
          <!-- 这里是父评论 -->
          <div v-if="item.parent">
            <postCommentFloor :parentComment="item.parent" @setData="parentData" />
          </div>

          <div @mouseenter="isShow = true" @mouseleave="isShow = false">
            <div class="text">{{item.content}}</div>
            <el-row class="imgList" type="flex" v-if="item.pics.length > 0">
              <div class="img" v-for="(e,index) in item.pics" :key="index">
                <img
                  :src="$axios.defaults.baseURL + e.url"
                  alt
                  @click="imgDialog($axios.defaults.baseURL + e.url)"
                />
                <el-dialog :visible.sync="imgVisible">
                  <img width="100%" :src="imageUrl" alt />
                </el-dialog>
              </div>
            </el-row>
            <div class="bottom">
              <a
                href="#textarea"
                class="reply"
                v-show="isShow"
                @click="setData(item.id,item.account.nickname)"
              >回复</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import postCommentFloor from "@/components/post/postCommentFloor";
import moment from "moment";
export default {
  props: ["id"],
  data() {
    return {
      isShow: false,
      comments: [], // 评论列表
      total: 0, // 评论总数

      // 分页数据
      pageIndex: 0,
      pageSize: 2,
      // 图片上传数据
      dialogImageUrl: "",
      dialogVisible: false,
      pics: [],
      replyObj: {}, // 回复的 id ,名字
      myComment: "", // 评论

      imgVisible: false, // 图片预览数据
      imageUrl: "" // 图片预览的地址
    };
  },
  filters: {
    // 过滤器将时间戳转换成日期格式
    formatTime(val, format) {
      return moment(val).format(format || "YYYY-MM-DD HH:mm");
    }
  },
  components: {
    postCommentFloor
  },
  mounted() {
    this.getComments();
  },
  methods: {
    // 获取文章评论
    getComments() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.id,
          _limit: this.pageSize,
          _start: (this.pageIndex - 1) * this.pageSize
        }
      }).then(res => {
        // console.log(res)
        this.total = res.data.total;
        const { data } = res.data;
        // 需要处理用户头像地址
        data.forEach(e => {
          if (e.account.defaultAvatar.indexOf("http") < 0) {
            e.account.defaultAvatar =
              this.$axios.defaults.baseURL + e.account.defaultAvatar;
          }
        });
        this.comments = data;
      });
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getComments();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getComments();
    },

    // 图片上传方法
    //on-remove--移除/删除待上传列表中的图片触发的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //on-preview--点击待上传列表中的图片所触发的事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(file);
    },
    // 上传成功的钩子,file是一个数组,fileList是数组里的对象
    getPics(file, fileList) {
      this.pics.push(fileList.response[0]);
    },
    // 点击提交评论回复
    reply() {
      if (!this.myComment) {
        this.$alert("请输入评论", "提示", {
          type: "warning"
        });
      }
      this.$axios({
        url: "/comments",
        method: "post",
        data: {
          content: this.myComment,
          follow: this.replyObj.id ? this.replyObj.id : "",
          pics: this.pics,
          post: this.id
        },
        headers: {
          // Bearer属于jwt的token标准
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
      }).then(res => {
        // console.log(res)
        this.$message.success(res.data.message);
        this.getComments();
        this.myComment = "";
        this.replyObj = {};
      });
    },
    // 点击回复
    setData(id, name) {
      this.replyObj = {
        id,
        name
      };
    },
    // 子组件传来的
    parentData(obj) {
      this.replyObj = obj;
      // console.log(this.replyObj)
    },
    // 点击  图片预览
    imgDialog(url) {
      this.imgVisible = true;
      this.imageUrl = url;
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-wrapper {
  h4 {
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .reply-tag {
    display: inline-block;
    margin-bottom: 10px;
    background-color: rgba(144, 147, 153, 0.1);
    border-color: rgba(144, 147, 153, 0.2);
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, 0.2);
    color: #999;
    i {
      margin-left: 6px;
      width: 16px;
      line-height: 16px;
      text-align: center;
      cursor: pointer;
      border-radius: 50px;
      &:hover {
        color: #fff;
        background: #909399;
      }
    }
  }
}
.el-input {
  resize: none;
}
.btn {
  margin: 10px 0 30px;
  .btn-right {
    width: 56px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
    background-color: #409eff;
    color: #fff;
    cursor: pointer;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  /deep/ .el-upload--picture-card,
  /deep/ .el-upload-list__item {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
}
.comments {
  border: 1px solid #ddd;
}
.el-pagination {
  margin-top: 10px;
}
.list {
  border-bottom: 1px dashed #ddd;
  padding: 20px 20px 5px;
  &:last-child {
    border-bottom: none;
  }
  .title {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    .time {
      color: #999;
    }
    .userImg {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
  }
  .content {
    padding: 0 0 0 30px;
    .text {
      margin-top: 10px;
    }
    .img {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 5px;
      margin-top: 10px;
      padding: 5px;
      border: 1px dashed #ddd;
      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        object-fit: cover;
      }
    }
    .bottom {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #1e50a2;
      text-align: right;
    }
  }
}
</style>